<%@ page contentType="text/html;charset=UTF-8" language="java"  import="java.util.*" trimDirectiveWhitespaces="true" %>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>编辑商品分类</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <%@include file="/WEB-INF/pages/common/commonCss.jsp"%>
  <link rel="stylesheet" href="${basePath}/resources/css/colorpicker.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/datepicker.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/uniform.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/select2.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-style.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-media.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/bootstrap-wysihtml5.css" />


</head>
<style>
  .select2-container {
    float:left;
    width: 35%;
  }
</style>
<body>

<!--Header-part-->
<%@include file="/WEB-INF/pages/common/head.jsp"%>


<!--sidebar-menu-->
<%@include file="/WEB-INF/pages/common/left.jsp"%>

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> </a>
      <a href="#" class="current">平台商品分类编辑</a> </div>
    <%--<h1>平台商品新增</h1>--%>
  </div>

  <div class="container-fluid">


    <div class="row-fluid">
      <div class="span12">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-align-justify"></i> </span>
            <h5></h5>
          </div>
          <div class="widget-content nopadding">
            <form action="${adminPath}/shop/goodcatogory/update" id="form" method="POST" class="form-horizontal" enctype="multipart/form-data">
              <input type="hidden" name="id" value="${goodcatogory.id}"/>
              <div class="control-group" >
                <label class="control-label">分类级别:</label>
                <div class="controls">
                  <select  name="level"   id="level"  value="${goodcatogory.level}"  onchange="goodcatogory.change()">
                    <option value="一级分类" ${goodcatogory.level=="一级分类"?'selected':''}>一级分类</option>
                    <option value="二级分类" ${goodcatogory.level=="二级分类"?'selected':''}>二级分类</option>
                  </select>
                </div>
              </div>

                <div class="control-group" id="pid"  style="display:none" >
                  <label class="control-label">父级分类:</label>
                  <div class="controls">
                    <div class="select2-container" >
                      <div class="select2-drop select2-offscreen" style="overflow: hidden">
                        <div class="select2-search">
                          <input type="text" autocomplete="off" class="select2-input" tabindex="0">
                        </div>
                        <ul class="select2-results">
                        </ul>
                      </div>
                    </div>
                    <select  name="pid"  id="parentId" value="${goodcatogory.pid}">
                      <c:forEach items="${firstcatogorys}" var="item">
                        <option value="${item.id}" ${goodcatogory.pid==item.id?'selected':''}>${item.name}</option>
                      </c:forEach>
                    </select>
                  </div>
                </div>


              <div class="control-group">
                <label class="control-label">分类名称 :</label>
                <div class="controls">
                  <input type="text" class="span5"  name="name" id="name" value="${goodcatogory.name}" placeholder="分类名称">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label">是否热销</label>
                <div class="controls">
                  <label>
                    <input type="radio" value="001" name="hotCode" ${goodcatogory.hotCode == '001'?'checked':''}> 是
                  </label>
                  <label>
                    <input type="radio" value="002" name="hotCode" ${goodcatogory.hotCode == '002'?'checked':''}> 否
                  </label>
                </div>
              </div>


              <div class="control-group">
                <label class="control-label"></label>
                <div class="controls">
                  <div class="imagepreview" class="col-md-5">
                    <c:if test="${goodcatogory.bannerurl != null || ''.equals(goodcatogory.bannerurl)}" >
                      <%-- <img id="image" alt="概要图片" src="/summrize/${fn:substring(news.titleimage,27,100)}"  width="100px" height="100px"/>--%>
                      <img id="image" alt="" src="${goodcatogory.bannerurl}"  width="200" height="200"/>
                    </c:if>
                  </div>
                </div>
              </div>



              <div class="control-group">
                <label class="control-label">主图图片</label>
                <div class="controls">
                  <input type="file" name="file"  onchange="goodcatogory.showImg(this)"/>
                </div>
              </div>

                <div class="control-group">
                  <div class="controls">
                    <button type="button" onclick="goodcatogory.submit()" class="btn btn-success">确定</button>
                    <button type="reset" class="btn btn-default" onclick="history.go(-1)">返回</button>
                  </div>
                </div>

          </form>
          </div>

          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->

</div>



<!--Footer-part-->
<%@include file="/WEB-INF/pages/common/footer.jsp"%>

<!--end-Footer-part-->

<%@include file="/WEB-INF/pages/common/commonJS.jsp"%>
<script src="${basePath}/resources/js/bootstrap.min.js"></script>
<script src="${basePath}/resources/js/select2.min.js"></script>



<script>
  $('.textarea_editor').wysihtml5();
</script>

<script>
  //上传图片预览方法
  $('#img').change(function () {
    var file = this.files[0]; //选择上传的文件
    var r = new FileReader();
    r.readAsDataURL(file); //Base64
    $(r).load(function () {
      $('#imagepreview').html('<img src="' + this.result + '" width="100px" height="100px" alt="商品图片" />');
    });
  });


  var goodcatogory = {
      //显示图片
      showImg:function (obj) {
          var $this = $(obj);
          var file = obj.files[0]; //选择上传的文件
          var r = new FileReader();
          r.readAsDataURL(file); //Base64
          $this.parent();
          // alert($this.prop("outerHTML"));
          // alert($this.parent().parent().prop("outerHTML"));
          //alert($this.parent().parent().prev().find(".imagepreview").prop("outerHTML"));
          $(r).load(function () {
              //$('.imagepreview').html('<img src="' + this.result + '" width="100px" height="100px" alt="商品图片" />');
              $this.parent().parent().prev().find(".imagepreview").html('<img src="' + this.result + '" width="200" height="200" alt="商品图片" />');
          });
      },
      change:function(){
          changeshow();
      },
      submit:function () {
          if(isEmpty($('#name').val())){
              loading("请输入分类名称",4);
              $("#name").focus();
              return;
          }
          $("#form").submit();
      }
  };

$(function(){
  changeshow();
})
function changeshow(){
  var level = $("#level").val();
  if(level=="二级分类"){
    $("#pid").show();
  }else{
    $("#pid").hide();
    $("#parentId").val("");

  }
}

</script>

</body>
</html>
